<template>
  <div class="home">
    <!--点击弹窗后隐藏首页内容 -->
    <transition name="van-fade">
      <div v-if="$route.path === '/home'">
        <!-- 首页搜索 -->
        <Search />
        <!-- 首页banner轮播 -->
        <BannerSwiper :banner="banner" />
        <!-- 品牌列表 -->
        <Channel :channel="channel" />
        <!-- 品牌制造商直供 -->
        <BrandList :brandList="brandList" />
        <!-- 新品首发 -->
        <GoodsList :GoodsListdata="newGoodsList" />
        <!-- 人气推荐 -->
        <HotGoodsList :hotGoodsList="hotGoodsList" />
        <!-- 专题精选 -->
        <TopicList :topicList="topicList" />
        <!-- 产品分类 -->
        <CategoryList :categoryList="categoryList" />

        <!-- tab导航 -->
      </div>
    </transition>
    <!-- 遮罩层 -->
    <transition name="van-fade">
      <div class="popup-shadow" v-show="isShowshadow"></div>
    </transition>

    <!-- 弹出搜索框 -->
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// import axios from "axios";
// import instance from "@/request/request";s
import GoodsList from "@/components/homepage/GoodsList";
import CategoryList from "@/components/homepage/CategoryList";
import Search from "@/components/homepage/Search";
import BannerSwiper from "@/components/homepage/BannerSwiper";
import Channel from "@/components/homepage/Channel";
import BrandList from "@/components/homepage/BrandList";
import HotGoodsList from "@/components/homepage/HotGoodsList";
import TopicList from "@/components/homepage/TopicList";
import { GetHomeData } from "@/request/api";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      // searchVal: "",
      // 轮播数据
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      categoryList: [],
      topicList: [],
    };
  },
  computed: {
    ...mapState({
      isShowshadow: (state) => state.Showshadow.isShowshadow,
    }),
  },
  created() {
    GetHomeData()
      .then((res) => {
        //then的res 接收的是响应拦截器返回的数据
        // console.log(res.data);
        let {
          // banner轮播
          banner,
          // 频道
          channel,
          // 品牌
          brandList,
          // 新产品
          newGoodsList,
          // 人气推荐
          hotGoodsList,
          // 分类产品展示
          categoryList,
          // 专题精选
          topicList,
        } = res.data;
        this.banner = banner;
        this.channel = channel;
        this.brandList = brandList;
        this.newGoodsList = newGoodsList;
        this.hotGoodsList = hotGoodsList;
        this.categoryList = categoryList;
        this.topicList = topicList;
        // console.log("分类列表的数据：", this.categoryList);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    ...mapMutations({
      chanisShowshadow: "Showshadow/chanisShowshadow",
    }),
  },
  components: {
    // 首页搜索框
    Search,
    // banner轮播
    BannerSwiper,
    // 频道
    Channel,
    // 品牌
    BrandList,
    // 新产品
    GoodsList,
    // 人气推荐
    HotGoodsList,
    // 专题精选
    TopicList,
    // 分类产品展示
    CategoryList,
  },
  // 路由监听
  watch: {
    $route(to, from) {
      if (to.path === "/home") {
        this.chanisShowshadow(false);
      }
    },
  },
};
</script>
<style lang="less">
.home {
  padding-bottom: 0.5rem;
}
// !!!Vue的过渡效果的写法，
// 进入过渡的初始状态，以及离开过渡的结束状态

.slide-enter,
.slide-leave-to {
  right: -100%;
}
// 过渡时间的设置
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
//  进入过渡的结束状态，以及离开过渡的初始状态
.slide-enter-to,
.slide-leave {
  right: 0;
}
// 遮罩层
.popup-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.5);
}
</style>